<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="全局Label列宽">
                <el-input v-model="propJson.labelLength" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="展示表单的按钮">
                <el-checkbox-group v-model="propJson.showButtons" style="width: 100%">
                    <el-checkbox label="Cancel">取消</el-checkbox>
                    <el-checkbox label="Submit">提交</el-checkbox>
                    <el-checkbox label="Reset">重置</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.list">
                    <template #title>
                        <div class="collapseTitle">
                            <span>字段 {{item.label}}</span>
                        </div>
                    </template>
                    <el-form-item label="label名称">
                        <el-input v-model="item.label" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="属性名称-英文">
                        <el-input v-model="item.labelEn" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="是否必填">
                        <el-radio-group v-model="item.isMust">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="必填提示语" v-if="item.isMust">
                        <el-input v-model="item.mustTipContent" style="width: 100%"/>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
            <br />
            <span>表单取消行为</span>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addFormCancelAction()">添加表单取消行为</el-button>
            </div>

            <CommonThirdServiceAction :actionList="propJson.formCancelAction" :commonParam="commonParam"/>

            <br />
            <span>表单提交行为</span>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addFormSubmitAction()">添加表单提交行为</el-button>
            </div>

            <CommonThirdServiceAction :actionList="propJson.formSubmitAction" :commonParam="commonParam"/>
        </el-form>
    </div>
</template>

<script>
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction";

export default {
    name: "GlobalFormDrawer",
    props: ['commonParam'],
    components: {
        CommonThirdServiceAction
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
    methods: {
        addFormCancelAction() {
            let variableInfo = {variableValue: "", type: "variable", variableParamName: "", apiMethod: "GET", apiType: "MSOA", apiPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
            this.propJson.formCancelAction.push(variableInfo)
        },
        addFormSubmitAction() {
            let variableInfo = {variableValue: "", type: "variable", variableParamName: "", apiMethod: "GET", apiType: "MSOA", apiPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
            this.propJson.formSubmitAction.push(variableInfo)
        }
    }
}
</script>

<style scoped lang="less">

</style>